<template>
    <div class="warehouse">
        <div class="top flex align-items space-between">
            <div class="left">{{ info.name }}</div>
            <div class="right fn-ctr" @click='copyTxt'>一键复制</div>
        </div>
        <div class="address flex align-items flex-start">
            <div class="txt1">地区 : {{ info.area }}</div>
        </div>
        <div class="address flex align-items flex-start">
            <div class="txt2">邮编 : {{ info.code }}</div>
        </div>
        <div class="address flex align-items flex-start">
            <div class="txt2">用户编号 : {{ info.userSn }}</div>
        </div>
        <div class="info flex align-items flex-start">
            <i class="iconfont iconlocation"></i>   
            <span>{{ info.address }}</span>
        </div>
        <div class="user flex align-items flex-start">
            <img :src="addressEndPic" alt="">
            <span class="u-name">{{ info.username }}</span>
            <span class="u-phone">{{ info.phone }}</span>
        </div>
    </div>
</template>

<script>
import addressEndPic from '@/assets/address_end.png';
    export default {
        props:['info'],        
        data(){
            return {
                addressEndPic,
                
            }
        },
        methods:{
            copyTxt(){
                this.$copyText(this.info.addr);
                this.$toast("复制成功")
            }
        }
    }
</script>

<style lang="less" scoped>
    .warehouse{
        width: 100%;
        height: auto;
        background-color: #fff;
        padding-top: 20px;
        .top{
            width: 100%;
            .left{
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
            }
            .right{
                width: 60px;
                height: 22px;
                background: #5652FF;
                box-shadow: 0px 1px 3px 0px rgba(86, 82, 255, 0.34);
                border-radius: 5px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
        }
        .address{
            width: 100%;
            overflow: hidden;
            margin: 10px 0;
            .txt1{
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
                margin-right: 42px;
            }
            .txt2{
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
            }
        }
        .info{
             width: 100%;
            overflow: hidden;
            margin-bottom: 15px;
            .iconfont{
                font-size: 16px;
                color: #ccc;
                margin-right: 5px;
            }
            span{
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
            }
        }
        .user{
            width: 100%;
            height: auto;
            padding: 7px 0 3px;
            border-top: 1px solid #EEEEEE;
            img{
                width: 33px;
                height: 33px;
                position: relative;
                top: 2px;
            }
            .u-name{
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                margin-left: 6px;
                margin-right: 12px;
            }
            .u-phone{
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
            }
        }

    }
</style>